<%@page import="edu.sjsu.itack.dao.BoardDao"%>
<%@page import="edu.sjsu.itack.entity.Board"%>
<%@page import="edu.sjsu.itack.entity.User"%>
<%@page import="java.util.Set"%>
<%@ page language="java" contentType="text/html; charset=US-ASCII"
	pageEncoding="US-ASCII"%>
<%@include file="header.jsp"%>
<aside class="aside">
	<ul class="nav nav-pills nav-stacked" id="myTab">
		<li class="dropdown"><a class="dropdown-toggle"
			data-toggle="dropdown" href="#">Settings<b class="caret"></b></a>
			<ul class="dropdown-menu">
				<li><a href="#profile" data-toggle="tab">Edit Profile</a></li>
				<li><a href="inviteFriends.jsp">Invite Friends</a></li>
			</ul></li>
		<li class="active dropdown"><a class="dropdown-toggle"
			data-toggle="dropdown" href="#">Tacks<b class="caret"></b></a>
			<ul class="dropdown-menu">
				<li><a href="uploadWeb.jsp" data-toggle="tab">Tack from
						Website</a></li>
				<li><a href="uploadTack.jsp">Upload tack</a></li>
			</ul></li>
		<li><a class="dropdown-toggle" href="board.jsp">Boards</a></li>
	</ul>
</aside>
<section class="section" id="section">
	<div class="upload-tack">
		<form class="form-signin" action="find" method="post">
			<fieldset>
				<legend>Tack from Website Tack</legend>
				<input type="text" class="form-control" name="url"
					placeholder="Specify URL" required autofocus>
				<button class="btn btn-primary" type="submit">Next</button>
			</fieldset>
		</form>
	</div>
	<div id="newtack" class="modal fade" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">

				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">Tack from Web</h4>
				</div>
				<div class="modal-body">
					<form class="form" action="UploadTack.do" method="post">
						<input type="hidden" name="mode" value="1"> <input
							type="hidden" name="uploadImg"> <input type="text"
							class="form-control" name="tackName" placeholder="Name your Tack"
							required autofocus> <select id="boardId" name="boardId"
							class="form-control">
							<option value="0">Choose Board</option>
							<%
								User user = (User) session.getAttribute("user");
									    Board[] boardArr = new BoardDao().getAllBoardsForUser(user.getUserId());
											if (boardArr != null && boardArr.length > 0) {
											int cnt = 0;
												for (Board bd : boardArr) {
													String boardName = bd.getName();
							%>
							<option value="<%=bd.getBoardId()%>"><%=bd.getName()%></option>
							<%
								}
											}
							%>
						</select>
						<textarea name="tackDesc" class="form-control" rows="4" cols="47"
							placeholder="Tack Description"></textarea>
						<div class="modal-footer">
							<button type="button" class="btn btn-default"
								data-dismiss="modal">Close</button>
							<button type="submit" class="btn btn-primary">Tack</button>
						</div>
					</form>
				</div>

			</div>
		</div>
		<!-- /.modal-dialog -->
	</div>

	<%
		Set<String> images = (Set<String>)request.getAttribute("hasUrl");
		   if (request.getAttribute("hasUrl") != null) {
		      for (String img : images) {
	%>
	<div class="tack">
		<div>
			<img style="width: 190px; height: 150px;" src="<%=img%>">
		</div>
		<button class="btn btn-default btn-sm" type="button"
			onclick="loadTackDialog('<%=img%>')">Select</button>
	</div>
	<%
		}}
	%>
</section>
<script>
	function loadTackDialog(imgPath) {
		document.getElementsByName("uploadImg")[0].value = imgPath;
		$('#newtack').modal({
			show : true
		});
	}
</script>